<template>
    <div class="app-container">
        <el-form
            class="filters"
            ref="searchForm"
            size="mini"
            :model="searchForm"
            label-width="90px"
        >
            <el-row>
                <el-col :span="5">
                    <el-form-item label="设备编码" style="width: 100%">
                        <el-input
                            type="textarea"
                            :rows="3"
                            :placeholder="'请输入柜号，多个编码之间请回车换行，禁止输入特殊字符！输入示例：\nCC08DPC0202204250001\nCC08DPC0202205070001\n0000092011500063'"
                            v-model="searchForm.codes"
                            @change.native="keyUp($event)"
                            @input.native="keyInput($event)"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="19" class="filters">
                    <el-form-item label="厂商" v-if="platformType == 'P'">
                        <el-select
                            v-model="searchForm.organizationId"
                            clearable
                            placeholder="请选择厂商"
                            @change="organizeChange"
                        >
                            <el-option
                                v-for="item in factuerOption"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="运营商">
                        <el-select
                            :disabled="!searchForm.organizationId"
                            v-model="searchForm.operatorId"
                            clearable
                            placeholder="请先选择厂商"
                        >
                            <el-option
                                v-for="item in operatorOption"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备型号">
                        <el-select
                            v-model="searchForm.equipModeIds"
                            multiple
                            clearable
                            placeholder="请选择设备型号"
                        >
                            <el-option
                                v-for="item in modelOption"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="联网状态">
                        <el-select
                            v-model="searchForm.isOnline"
                            clearable
                            placeholder="请选择联网状态"
                        >
                            <el-option
                                v-for="item in enumsJson.IS_ONLINE"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务状态">
                        <el-select
                            v-model="searchForm.status"
                            clearable
                            placeholder="请选择业务状态"
                        >
                            <el-option
                                v-for="item in enumsJson.EQUIP_STATUS"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签">
                        <el-select
                            v-model="searchForm.tagIds"
                            multiple
                            collapse-tags
                            placeholder="请选择标签"
                            clearable
                        >
                            <el-option
                                v-for="item in tagsOption"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="地区" class="area-select">
                        <el-cascader
                            :options="areaSelectData"
                            :props="areaSelectDataProps"
                            ref="areaSelectRef"
                            size="large"
                            v-model="searchForm.regionCode"
                            clearable
                            placeholder="请选择省市区"
                            @change="operateChange"
                        />
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input
                            v-model="searchForm.address"
                            clearable
                            placeholder="请输入详细地址"
                        />
                    </el-form-item>
                    <div class="search-btns">
                        <el-checkbox
                            v-model="searchForm.isAbnormalSN"
                            class="fault_check"
                            @change="anomalyChange($event)"
                            >异常SN查询</el-checkbox
                        >
                        <el-checkbox
                            v-model="searchForm.isAlarm"
                            class="fault_check"
                            v-if="!isAnomaly"
                            >仅故障桩</el-checkbox
                        >

                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-search"
                            @click="doSearch"
                            >搜索</el-button
                        >
                        <el-button
                            type="default"
                            size="mini"
                            icon="el-icon-refresh"
                            @click="resetSearch"
                            >重置</el-button
                        >
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <Table
            class="tableData"
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
            v-if="!isSN"
        >
            <template slot="codes" slot-scope="scope">
                <div class="codes">
                    <span>{{ scope.row.code }}</span>
                    <DetectOnline
                        :currentRow="scope.row"
                        @updateStatus="fetchData"
                    ></DetectOnline>
                </div>
            </template>
            <template slot="warning" slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.isAlarm === true"
                    >故障</el-tag
                >
                <el-tag type="success" v-else-if="scope.row.isAlarm === false"
                    >正常</el-tag
                >
            </template>
            <template slot="remark" slot-scope="scope">
                <div class="remark-content" @click="isRemarkRow(scope.row)">
                    <el-tooltip placement="left">
                        <div
                            class="remark-div"
                            slot="content"
                            v-html="scope.row.remark"
                            style="
                                white-space: pre-line;
                                max-width: 32vw;
                                max-height: 60vh;
                                overflow-y: auto;
                            "
                        ></div>
                        <span class="remark-text">{{
                            scope.row.remark | htmlToPlainText
                        }}</span>
                    </el-tooltip>
                    <i
                        class="el-icon-edit-outline"
                        v-permission="['om:information:updateremark']"
                    ></i>
                </div>
            </template>

            <template slot="tags" slot-scope="scope">
                <div class="tags-content">
                    <Tags  :closable="true" closePermission="om:information:deleteTag"
                        :currentRow="scope.row"
                        @updateList="fetchData"
                    ></Tags>
                    <i v-permission="['om:information:insertTag']"
                        class="el-icon-circle-plus-outline"
                        @click="tagSetShow(scope.row)"
                    ></i>
                </div>
            </template>
            <template slot="action" slot-scope="scope">
                <el-button
                    type="success"
                    class="second-btn"
                    size="mini"
                    @click="logDialog(scope.row)"
                    v-permission="['om:information:connectionLog']"
                    >连接日志</el-button
                >

                <!--换电柜 -->
                <el-button
                    type="primary"
                    size="mini"
                    v-permission="['om:information:cabinetDetails']"
                    @click="boxDialog(scope.row)"
                    :disabled="!scope.row.isAllowOperate"
                    >柜详情</el-button
                >

                <!--充电堆 -->
                <el-button
                    type="primary"
                    size="mini"
                    v-permission="['om:information:systemDetails']"
                    :disabled="!scope.row.isAllowOperate"
                    @click="systemDialog(scope.row)"
                    >系统详情</el-button
                >
                <el-button
                    class="fifth-btn"
                    type="primary"
                    size="mini"
                    :disabled="!scope.row.isAllowOperate"
                    v-permission="['om:information:camera']"
                    @click="cameraDialog(scope.row)"
                    >摄像头</el-button
                >
                <el-button
                    class="third-btn"
                    type="primary"
                    size="mini"
                    :disabled="!scope.row.isAllowOperate"
                    v-permission="['om:information:statusEvaluation']"
                    @click="boxStatusDialog(scope.row)"
                    >柜状态评估</el-button
                >
                <el-button
                    type="success"
                    size="mini"
                    @click="isEditDialog(scope.row)"
                    :disabled="!scope.row.isAllowOperate"
                    v-permission="['om:information:paramsetting']"
                    >参数设置</el-button
                >
                <el-button
                    type="warning"
                    size="mini"
                    @click="binDialog(scope.row)"
                    :disabled="!scope.row.isAllowOperate"
                    v-permission="['om:information:bincontrol']"
                    >仓控制</el-button
                >

                <el-button
                    type="warning"
                    v-permission="['om:information:port']"
                    size="mini"
                    :disabled="!scope.row.isAllowOperate"
                    @click="portDialog(scope.row)"
                    >端口</el-button
                >

                <el-button
                    type="danger"
                    size="mini"
                    @click="isReStart(scope.row)"
                    :disabled="!scope.row.isAllowOperate"
                    v-permission="['om:information:restart']"
                    >重启</el-button
                >
            </template>
        </Table>
        <Table
            class="tableData"
            :tableHeader="SNtableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
            v-else
        >
            <template slot="codes" slot-scope="scope">
                <div class="codes">
                    <span>{{ scope.row.id }}</span>
                    <img
                        v-if="scope.row.isOnline == 1"
                        src="@/assets/image/online.png"
                        alt=""
                    />
                    <img v-else src="@/assets/image/offline.png" alt="" />
                </div>
            </template>
            <template slot="action" slot-scope="scope">
                <el-button
                    type="danger"
                    size="mini"
                    @click="isResetSn(scope.row)"
                    :disabled="scope.row.isOnline !== 1"
                    >SN重置</el-button
                >
            </template>
        </Table>
        <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="fetchData"
        />

        <!-- 参数设置弹框 -->
        <Dialog
            :visible="visible"
            width="52%"
            :isFooter="false"
            :title="dialogTitle"
            @cancelDialog="cancelDialog"
        >
            <Params
                class="box-detail"
                :equipId="equipId"
                @cancelDialog="cancelDialog"
                :visible="visible"
            ></Params>
        </Dialog>
        <!-- 仓控制 -->
        <Dialog
            :visible="binVisible"
            width="50%"
            :isFooter="false"
            :title="dialogTitle"
            @cancelDialog="binDetailClose"
        >
            <binDetail
                :equipId="equipId"
                :binVisible="binVisible"
                @changeForbidList="changeForbidList"
                @showProgress="showProgress"
                @changeProgressList="changeProgressList"
            ></binDetail>
        </Dialog>
        <!-- 柜详情 -->
        <Dialog class="box-dialog"
            :visible="boxVisible"
            width="68%"
            :isFooter="false"
            :title="dialogTitle"
            @confirmDialog="confirmDialog"
            @cancelDialog="boxDetailClose"
        >
            <boxDetail
                class="box-detail"
                :currentRow="currentRow"
                :boxVisible="boxVisible"
            ></boxDetail>
        </Dialog>
        <!-- 柜详情进度 -->
        <el-dialog
            title="仓控制"
            :visible.sync="boxProgressVisible"
            width="25%"
            :show-close="false"
            class="binControlContent"
        >
            <boxProcess
                :progressList="progressList"
                :forbidList="forbidList"
                @handleCloseProcess="handleCloseProcess"
            ></boxProcess>
        </el-dialog>
        <!-- 重启设置 -->
        <Dialog
            :visible="restartVisible"
            width="28%"
            :isFooter="false"
            :title="dialogTitle"
            @cancelDialog="cancelStartDialog"
        >
            <restartSet
                :restartVisible="restartVisible"
                :currentRow="currentRow"
                @cancelStartDialog="cancelStartDialog"
            ></restartSet>
        </Dialog>

        <!-- SN重置 -->
        <Dialog
            :visible="SNVisible"
            width="25%"
            class="SNDialog"
            :isFooter="false"
            title="SN重置"
            @cancelDialog="cancelSNDialog"
        >
            <el-form
                class="SNForm"
                ref="SNForm"
                :model="SNForm"
                label-width="80px"
                :rules="SNFormRules"
            >
                <el-form-item label="SN码" prop="sn">
                    <el-input
                        class="restart-input"
                        v-model="SNForm.sn"
                        placeholder="请输入SN码"
                    ></el-input>
                </el-form-item>
                <div class="restart-btn">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleSN"
                        :loading="SNBtnLoading"
                        >确定</el-button
                    >
                </div>
            </el-form>
        </Dialog>

        <!-- 充电堆操作项 -->
        <!-- 系统详情 -->
        <Dialog
            :visible="CSystemVisible"
            width="55%"
            :isFooter="false"
            :title="CSystemTitle"
            @cancelDialog="ECSystemCancelDialog"
        >
            <SystemDetail
                class="table-box"
                :currentRow="currentRow"
                :CSystemVisible="CSystemVisible"
            ></SystemDetail>
        </Dialog>
        <!-- 参数详情 -->
        <Dialog
            :visible="CSParamVisible"
            width="42%"
            :isFooter="false"
            :title="CSParamTitle"
            @confirmDialog="CSParamConfirmDialog"
            @cancelDialog="CSParamCancelDialog"
        >
            <CSParams
                :currentRow="currentRow"
                :CSParamVisible="CSParamVisible"
            ></CSParams>
        </Dialog>

        <!-- 端口 -->
        <Dialog
            :visible="portVisible"
            width="45%"
            :isFooter="false"
            :title="portTitle"
            @confirmDialog="portConfirmDialog"
            @cancelDialog="portCancelDialog"
        >
            <Port :currentRow="currentRow" :portVisible="portVisible"></Port>
        </Dialog>

        <!-- 摄像头 -->
        <Dialog
            :visible="cameraVisible"
            width="35%"
            :isFooter="false"
            :title="dialogTitle"
            @cancelDialog="cameraVisible = false"
        >
            <cameraDetail
                :currentRow="currentRow"
                :equipId="equipId"
                :cameraVisible="cameraVisible"
            ></cameraDetail>
        </Dialog>
        <!-- 柜状态评估 -->
        <Dialog
            :visible="boxStatusVisible"
            width="35%"
            :isFooter="false"
            :title="dialogTitle"
            @cancelDialog="boxStatusVisible = false"
        >
            <boxStatus
                :currentRow="currentRow"
                :equipId="equipId"
                :boxStatusVisible="boxStatusVisible"
            ></boxStatus>
        </Dialog>

        <!-- 备注 -->
        <Dialog
            :visible="remarkVisible"
            width="45%"
            title="编辑备注信息"
            :isFooter="false"
            @cancelDialog="remarkVisible = false"
        >
            <Remark
                :currentRow="currentRow"
                @closeRemarkDialog="closeRemarkDialog"
            ></Remark>
        </Dialog>

        <!-- 连接日志 -->
        <Dialog
            :visible="logVisible"
            width="38%"
            :title="`连接日志（${currentRow.code}）`"
            :isFooter="false"
            @cancelDialog="logVisible = false"
        >
            <connectLog :currentRow="currentRow"></connectLog>
        </Dialog>

        <!-- 单个设备标签编辑 -->
        <Dialog
            :visible="tagSetVisible"
            width="30%"
            title="设置标签"
            @cancelDialog="tagSetVisible = false"
            @confirmDialog="tagSetConfirmDialog"
        >
            <TagSet
                :currentRow="currentRow"
                :tagSetVisible="tagSetVisible"
                @handleTagSetChange="handleTagSetChange"
            ></TagSet>
        </Dialog>
    </div>
</template>

<script>
import { operator, equipment } from "@/api/factuer";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";
import Params from "../exitWarning/params";
import boxDetail from "../exitWarning/boxDetail.vue";
import cameraDetail from "../exitWarning/cameraDetail";

import { removeNullUndefined } from "@/utils/index.js";
import { handleConfirm } from "@/utils/messageBox";

import { mapGetters } from "vuex";

import operatejs from "../exitWarning/CS/operate";
import SystemDetail from "../exitWarning/CS/systemDetail.vue";
import CSParams from "../exitWarning/CS/param.vue";
import Port from "../exitWarning/CS/port.vue";
import boxStatus from "../exitWarning/boxStatus.vue";
import restartSet from "../exitWarning/restartSet.vue";
import binDetail from "../exitWarning/binDetail.vue";
import boxProcess from "../exitWarning/boxProcess.vue";

import Remark from "@/views/equipment/equipentry/components/remark.vue";
import connectLog from "@/views/equipment/equipentry/components/connectLog.vue";

import operatesjs from "@/views/equipment/equipentry/js/operate";

import Tags from "@/views/equipment/equipentry/components/tags.vue";
import TagSet from "@/views/equipment/equipentry/components/tagSet.vue";
import tagsjs from "@/views/equipment/equipentry/js/operate";

import DetectOnline from "@/views/equipment/equipentry/components/detectOnline.vue";
export default {
    components: {
        Pagination,
        Table,
        Dialog,
        Params,
        boxDetail,
        SystemDetail,
        CSParams,
        Port,
        cameraDetail,
        boxStatus,
        restartSet,
        binDetail,
        boxProcess,
        Remark,
        connectLog,
        DetectOnline,

        Tags,
        TagSet,
    },
    mixins: [operatejs, operatesjs, tagsjs],
    data() {
        return {
            listLoading: true,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 15,
                codes: "",
                organizationId: "",
                equipModeIds: [],
                operatorId: "",
                status: "",
                isOnline: "",
                regionCode: "",
                address: "",
                isAlarm: false,
                isAbnormalSN: false,
                tagIds:[],
            },

            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "50",
                    fixed: true,
                },
                { slot: "codes", label: "设备编码", width: "220" },
                { slot: "warning", label: "是否故障", width: "80" },
                {
                    label: "最近上线时间",
                    prop: "lastOnlineTime",
                    width: "80",
                },
                {
                    label: "最近下线时间",
                    prop: "lastOfflineTime",
                    width: "80",
                },
                { slot: "remark", label: "备注" },
                { slot: "tags", label: "标签" },
                { slot: "action", label: "操作", width: "580" },
            ],
            SNtableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                { slot: "codes", label: "特征码" },
                {
                    label: "厂商",
                    prop: "organizationName",
                },
                {
                    label: "设备类型",
                    prop: "equipTypeName",
                },
                {
                    label: "原SN码",
                    prop: "code",
                },
                {
                    label: "最后连接时间",
                    prop: "lastOfflineTime",
                },
                { slot: "action", label: "操作", width: "620" },
            ],
            tableData: [],
            visible: false, //弹框标识
            boxVisible: false,
            dialogForm: {
                name: "",
                code: "",
            },

            dialogTitle: "",
            isSN: false, //是否显示SN列表
            areaSelectData: [], // options绑定的数据就是引入的 provinceAndCityData
            areaSelectDataProps: {
                // multiple: true,
                // checkStrictly: true,
                // multipleLimit: 3,
                children: "childrens",
                value: "code",
                label: "name",
                emitPath: false,
            },
            operatorOption: [], //运营商option
            factuerOption: [], //厂商option
            enumsJson: {},
            modelOption: [], //设备型号option
            equipId: "", //设备id
            currentRow: {}, //当前行
            restartVisible: false,

            binVisible: false,

            boxProgressVisible: false,
            progressList: [],
            forbidList: [],

            platformType: this.$store.state.user.platformType,
            organizationId: this.$store.state.user.organizationId,

            SNVisible: false,
            SNForm: {
                sn: "",
            },
            SNFormRules: {
                sn: [
                    { required: true, message: "请输入SN码", trigger: "blur" },
                ],
            },
            SNBtnLoading: false, //SN按钮loading
            isAnomaly: false, //选中异常sn

            // CS
            CSystemVisible: false,
            CSystemTitle: "",

            CSParamVisible: false,
            CSParamTitle: "",

            portVisible: false,
            portTitle: "",

            cameraVisible: false,
            boxStatusVisible: false,
            tagsOption: [],
        };
    },
    computed: {
        ...mapGetters(["enums", "equipTypeCode"]),
    },
    watch: {
        enums: {
            async handler(cur, old) {
                if (!old && Object.keys(cur).length == 0) {
                    this.enumsJson = await this.$store.dispatch(
                        "enums/generateEnumMap"
                    );
                } else {
                    this.enumsJson = this.$store.state.enums.enums;
                }
            },
            deep: true, //对象内部的属性监听，也叫深度监听
            immediate: true,
        },
    },
    filters: {
        htmlToPlainText(value) {
            // 创建一个临时元素，用于将HTML解析为文本
            if (value) {
                var tempEl = document.createElement("div");
                tempEl.innerHTML = value;
                return tempEl.textContent || tempEl.innerText || "";
            }
            return "";
        },
    },
    async created() {
        if (this.platformType != "P") {
            //非平台用户
            this.searchForm.organizationId = this.organizationId;
            this.organizeChange(this.organizationId);
        } else {
            this.factuerOption = await this.$store.dispatch(
                "operator/generatorFactuer"
            );
        }
        this.fetchData();
        this.getOperator();
    },
    methods: {
        anomalyChange(e) {
            this.isAnomaly = e;
        },
        fetchData(val) {
            this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
            this.listLoading = true;
            let param = { ...this.searchForm };
            if (param.codes) {
                param.codes = param.codes.split("\n").filter((item) => item);
            }
            if (param.codes.length == 1) {
                param.code = param.codes[0];
                delete param.codes;
            }
            this.isSN = param.isAbnormalSN;
            equipment(
                "/info/list",
                "post",
                {
                    ...removeNullUndefined(param),
                },
                1
            )
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },
        async getOperator() {
            this.areaSelectData = await this.$store.dispatch(
                "operator/generatorRegion"
            );
            this.modelOption = await this.$store.dispatch(
                "operator/generatorModel"
            );
            this.tagsOption = await this.$store.dispatch(
                "operator/generatorTags"
            );
        },
        async organizeChange(e) {
            this.operatorOption = [];
            this.searchForm.operatorId = "";
            if (e) {
                let datas = await operator("/all", "get", {
                    organizationId: e,
                });
                this.operatorOption = datas.data;
            }
        },

        // 弹框取消
        cancelDialog() {
            this.visible = false;
        },
        // 弹框确认
        confirmDialog() {
            this.submitDialogForm("dialogForm");
        },

        submitDialogForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        boxDetailClose() {
            this.boxVisible = false;
            this.currentRow = {};
        },
        resetDialogForm(formName) {
            this.$refs[formName].resetFields();
        },
        operateChange(e) {
        },

        //限制输入特殊字符
        keyUp(e) {
            let str = e.target.value.replace(
                /[`~!@#$%^&*()_\-+=<>?:"{}|.\;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
                ""
            );
            e.target.value = str;
            this.searchForm.codes = str;
        },
        // 只能输入汉字、英文、数字
        keyInput(e) {
            let str = e.target.value.replace(/[^\a-\z\A-\Z0-9\n/]/g, "");
            e.target.value = str;
            this.searchForm.codes = str;
        },
        resetSearch() {
            this.searchForm = {
                pageNum: this.searchForm.pageNum,
                pageSize: this.searchForm.pageSize,
                codes: "",
                organizationId:
                    this.platformType != "P" ? this.organizationId : "",
                equipModeIds: [],
                operatorId: "",
                status: "",
                isOnline: "",
                regionCode: "",
                address: "",
                isAlarm: false,
                isAbnormalSN: false,
                tagIds:[],
            };
            this.isAnomaly = false;
        },
        doSearch() {
            this.searchForm.pageNum = 1;
            this.fetchData();
        },
        cancelStartDialog() {
            this.restartVisible = false;
        },

        showProgress() {
            this.boxProgressVisible = true;
        },
        changeForbidList(e) {
            this.forbidList = e;
        },
        changeProgressList(e) {
            this.progressList = e;
        },

        handleCloseProcess() {
            this.boxProgressVisible = false;
            this.progressList = [];
            this.forbidList = [];
        },
        // SN弹框
        cancelSNDialog() {
            this.SNVisible = false;
            this.SNForm = {
                sn: "",
            };
            this.SNBtnLoading = false;
        },
        handleSN() {
            this.$refs["SNForm"].validate((valid) => {
                if (valid) {
                    handleConfirm("确定要重置SN吗？", "warning", "提示")
                        .then((res) => {
                            this.doResetSN();
                        })
                        .catch((err) => {});
                } else {
                    return false;
                }
            });
        },
        doResetSN() {
            this.SNBtnLoading = true;
            let PARAM_ID = "";
            switch (this.equipTypeCode) {
                case "EC":
                    PARAM_ID = "06010025";
                    break;
                case "CS":
                    PARAM_ID = "07010042";
                    break;
            }
            let param = {
                entitys: [
                    {
                        id: PARAM_ID,
                        value: this.SNForm.sn,
                    },
                ],
                equipId: this.currentRow.id,
            };
            equipment("/operate/param/write", "post", param, 1)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.SNVisible = false;
                        this.fetchData();
                    }
                })
                .finally(() => (this.SNBtnLoading = false));
        },
        isResetSn(row) {
            this.currentRow = row;
            this.SNVisible = true;
        },
        binDetailClose() {
            this.binVisible = false;
        },
    },
};
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";

.area-select {
    .el-cascader {
        width: 100%;
    }
}

.filters {
    .el-form-item__content {
        width: auto;
    }
}

.codes {
    @include flexLayout(center, center);

    img {
        width: 20px;
        margin-left: 10px;
    }
}

.warn-one {
    line-height: 24px;
}

.alarm-name {
    display: inline-block;
    width: 150px;
    word-break: break-all;
}

.occurrent {
    margin-left: 17.5%;
}

.restart-btn {
    text-align: center;
}

.refresh-btn {
    position: absolute;
    top: 16px;
    right: 50px;
}

.binIndex-btn {
    width: 40px;
    height: 40px;
    margin-right: 20px;
}

.binForm {
    @include flexLayout(center, flex-start);
    flex-wrap: wrap;

    .el-card {
        width: 32% !important;
        margin-top: 10px;
    }

    .el-card:nth-child(3n-1) {
        margin: 0 2%;
    }

    .el-form-item {
        width: 100%;
    }
}

.operate-btns {
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

.fault_check {
    margin-right: 20px;
}

.el-icon-question {
    font-size: 20px;
    margin: 0 6px 0 10px;
    color: #f56c6c;
}

.binSwitch {
    margin: -5px 0 0 15px;
}

::v-deep .el-dialog__body {
    padding-top: 0;
}

.one-card {
    .card-status {
        @include flexLayout(center, center);

        .el-form-item {
            margin-bottom: 0;
        }
    }
}

.SNForm {
    padding-top: 30px;
}

.SNDialog {
    ::v-deep .dialog-container .el-dialog__body {
        min-height: 230px;
    }
}

.box-detail {
    max-height: 70vh;
}
.binControlContent {
    ::v-deep .el-dialog__body {
        padding-bottom: 10px;
        text-align: center;
    }
}
.remark-content {
    @include flexLayout(center, center);
    .remark-text {
        @include exceedFlow(1);
    }
    .el-icon-edit-outline {
        color: #5473e8;
        margin-left: 5px;
    }
}
.tableData {
    .el-button {
        margin: 0 5px 0 0;
    }
}
.tags-content {
    @include flexLayout(center, center);
    .el-icon-circle-plus-outline {
        cursor: pointer;
        position: relative;
        right: -8px;
        color: #5473e8;
        font-size: 16px;
    }
}
::v-deep .el-select__tags{
    .el-tag:first-child{
        max-width: 72%;
    }
}
.box-dialog{
::v-deep .el-dialog__body{
    padding: 0 5px 10px 12px;
}
}
</style>
